<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator="/" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">系统管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home" @click="crumbsClick">系统账号</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="typeDialog">
          <span class="main-breadcrumb-sp">{{ crumbsStatus }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="nx-content" v-if="!typeDialog">
      <div class="flex-bet">
        <div class="left-title flex">
          <el-button v-allow="'010301'" type="primary" @click="handleAdd()">添加系统账号</el-button>
        </div>
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-if="userType == 0" v-model="searchForm.userType" placeholder="请选择用户类型" @change="typeChange" clearable>
              <el-option label="超级管理员" value="0"></el-option>
              <el-option label="赛区管理员" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-if="userType == 0" v-model="searchForm.matchAreaId" placeholder="请选择赛区名称" clearable @change="matchAreaChange">
              <el-option v-for="item in matchAreaArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.roleId" placeholder="请选择角色名称" @change="onSubmit" clearable>
              <el-option v-for="item in roleArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input maxlength="50" show-word-limit placeholder="请输入账号" v-model="searchForm.username" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-allow="'010302'" type="primary" @click="onSubmit">查询</el-button>
            <el-button v-allow="'010302'" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <NxTable :table-cols="tableCols" :table-data="tableData" :pag-ination="pagination" class="table-wrap" @refresh="refresh">
        <template slot="userType" slot-scope="scope">
          <span v-if="scope.row.userType == 0">超级管理员</span>
          <span v-if="scope.row.userType == 1">赛区管理员</span>
        </template>
        <template slot="sex" slot-scope="scope">
          <span v-if="scope.row.sex == 0">男</span>
          <span v-if="scope.row.sex == 1">女</span>
        </template>
        <template slot="status" slot-scope="scope">
          <span class="nx-success" v-if="scope.row.status == 0">启用</span>
          <span class="nx-del" v-if="scope.row.status == 1">禁用</span>
        </template>
        <template slot="operation" slot-scope="scope">
          <span v-allow="'010305'" @click="handleStatus(scope.row)" class="nx-btn nx-edit" v-if="scope.row.status == 1">启用</span>
          <span v-allow="'010305'" @click="handleStatus(scope.row)" class="nx-btn nx-edit" v-if="scope.row.status == 0">禁用</span>
          <span v-allow="'010303'" @click="handleEdit(scope.row)" class="nx-btn nx-edit">编辑</span>
          <span v-allow="'010304'" @click="handleDelete(scope.row)" class="nx-btn nx-del">删除</span>
        </template>
      </NxTable>
    </div>
    <AddEditDialog :addEditId="addEditId" :addEditStatus="addEditStatus" :addEditIsDialog="addEditIsDialog"></AddEditDialog>
  </div>
</template>
<script>
import NxTable from "@/components/NxTable.vue";
import AddEditDialog from "./components/addEditDialog.vue";
import { Page } from "@/utils/pagination";
import { getSysUserList, delSysUser, getSysRoles, openOrCloseSysUser } from "@/api/system";
import { getMatchAreaInfos } from "@/api/matchArea";

export default {
  components: {
    NxTable,
    AddEditDialog,
  },
  // 表格数据
  data() {
    return {
      // 查询字段
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        userType: "",
        matchAreaId: "",
        roleId: "",
        username: "",
      },
      // 表格字段
      tableCols: [
        {
          label: "用户类型",
          slot: "userType",
          align: "center",
          width: 150,
        },
        {
          label: "赛区名称",
          prop: "matchAreaName",
          align: "center",
          width: 150,
        },
        {
          label: "角色名称",
          prop: "roleName",
          align: "center",
          width: 150,
        },
        {
          label: "账号",
          prop: "username",
          align: "center",
          width: 150,
        },
        {
          label: "姓名",
          prop: "realName",
          align: "center",
          width: 150,
        },
        {
          label: "性别",
          slot: "sex",
          align: "center",
          width: 150,
        },
        {
          label: "手机号",
          prop: "phone",
          align: "center",
          width: 150,
        },
        {
          label: "邮箱",
          prop: "email",
          align: "center",
          width: 150,
        },
        {
          label: "状态",
          slot: "status",
          align: "center",
          width: 150,
        },
        {
          label: "最近登录时间",
          prop: "lastLoginDate",
          align: "center",
          width: 180,
        },
        {
          label: "操作",
          slot: "operation",
          align: "center",
          width: 180,
          fixed: "right",
        },
      ],
      tableData: [],
      pagination: new Page(),
      crumbsStatus: "", // 三级面包屑名称
      typeDialog: false,
      addEditIsDialog: false, // 添加编辑页面状态
      addEditStatus: "add",
      addEditId: "", // 添加编辑rowid
      roleArray: [], // 角色集合
      matchAreaArray: [], // 赛区集合
      userType: "", // 用户类型（0超级管理员，1赛区管理员）
      matchAreaId: "", // 赛区id
    };
  },
  // 初始化加载
  mounted() {
    this.userType = Number(window.localStorage.getItem("userType"));
    this.matchAreaId = Number(window.localStorage.getItem("matchAreaId"));
    if (this.userType == 1) {
      this.searchForm.userType = "1";
      this.searchForm.matchAreaId = this.matchAreaId;

      // 获取角色列表
      this.getSysRoleList();
    }

    // 查询
    this.getList();

    // 获取赛区列表
    this.getMatchAreaInfoList();
  },
  // 自定义方法
  methods: {
    // 查询
    onSubmit() {
      this.pagination.pageNum = 1;
      this.getList();
    },
    // 分页查询
    refresh(val) {
      this.searchForm.pageNum = val.pageNum;
      this.searchForm.pageSize = val.pageSize;
      this.getList();
    },
    // 重置
    resetForm() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        userType: "",
        matchAreaId: "",
        roleId: "",
        username: "",
      };

      if (this.userType == 1) {
        this.searchForm.userType = "1";
        this.searchForm.matchAreaId = this.matchAreaId;
      } else {
        // 清空
        this.matchAreaArray = [];
        this.roleArray = [];
      }

      this.onSubmit();
    },
    // 查询列表
    getList() {
      getSysUserList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.pagination.count = res.count;
        }
      });
    },
    // 删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delSysUser({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加
    handleAdd() {
      this.addEditId = "";
      this.addEditStatus = "add";
      this.addEditIsDialog = true;
    },
    // 编辑
    handleEdit(row) {
      this.addEditId = row.id + "";
      this.addEditStatus = "edit";
      this.addEditIsDialog = true;
    },
    // 编辑添加取消关闭
    closeAddEdit() {
      this.addEditIsDialog = false;
    },
    // 面包屑
    crumbsClick() {
      this.typeDialog = false;
    },
    // 启用、禁用
    handleStatus(row) {
      openOrCloseSysUser({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getList();
        }
      });
    },
    // 用户类型切换
    typeChange() {
      this.searchForm.matchAreaId = "";
      this.matchAreaArray = [];

      this.searchForm.roleId = "";
      this.roleArray = [];

      // 获取赛区列表
      this.getMatchAreaInfoList();

      // 查询
      this.onSubmit();
    },
    // 获取赛区列表
    getMatchAreaInfoList() {
      if (this.searchForm.userType && this.searchForm.userType == 0) {
        // 管理员，赛区只有一个总部
        this.matchAreaArray = [{ id: 0, name: "总部" }];
      } else {
        getMatchAreaInfos({}).then((res) => {
          if (res.code == 200) {
            this.matchAreaArray = res.data;
          }
        });
      }
    },
    // 赛区下拉切换
    matchAreaChange() {
      this.searchForm.roleId = "";
      this.roleArray = [];

      // 获取角色列表
      this.getSysRoleList();

      // 查询
      this.onSubmit();
    },
    // 获取角色列表
    getSysRoleList() {
      if (this.searchForm.matchAreaId === "" || this.searchForm.matchAreaId == null) {
        return;
      }

      getSysRoles({ matchAreaId: this.searchForm.matchAreaId }).then((res) => {
        if (res.code == 200) {
          this.roleArray = res.data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
</style>
